<template>
    <div class="login">
        <div class="login-center">
            <Form :model="loginForm" :rules="rules" ref="login" :label-width="0">
                <Form-item label="" prop="username">
                    <Input v-model="loginForm.username" placeholder="请输入账号" />
                </Form-item>
                <Form-item label="" prop="password">
                    <Input v-model="loginForm.password" placeholder="请输入密码" />
                </Form-item>
                <Form-item>
                    <Button type="primary" @click="login('/login')" style="width: 79px;">登陆</Button>
                    <Button type="primary" @click="login('/useraccount')" style="width: 79px;">注册</Button>
                </Form-item>
            </Form>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            loginForm: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    {required: true, message: '请输入账号', trigger: 'blur'},
                    {required: true, message: '账号在4-20位', trigger: 'blur', min: 4, max: 20},
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {required: true, message: '密码在4-20位', trigger: 'blur', min: 4, max: 20},
                ]
            },
            apiPath: '',
        }
    },
    methods: {
        // 登陆验证
        login (path) {
            this.$refs.login.validate(valid => {
                if (!valid) {
                    return;
                }
                this.apiPath = path;
                this.submitLogin();
            })
        },
        // 登陆
        submitLogin () {
            this.$post('/api' + this.apiPath , this.loginForm).then(res => {
                // console.log(res);
                if (res.code === "00001") {
                // console.log('setItem')
                sessionStorage.setItem('Bearer', res.data);
                this.$router.push('/home');
                }
            }).catch(error => {
                console.log(error);
            })
        // console.log('hello');
        },
    },
    mounted () {

    }
}
</script>

<style lang="less" scoped>
    .login {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
    }
</style>